<template>
    <div class="commodity">
        <div v-for="(item, index) in list" :key="index" class="list-item">
            <div class="list-item-content" @click="openDetails(item)">
                <div class="commodity-img">
                    <img :src="item.imgUrl1 || $defaultGoodsImage" fit="contain" />
                </div>
                <div class="goods-info">
                  <div class="title">
                    {{ $textOmit(item.name) }}
                  </div>
                    <div class="money">
                        ${{
                            priceFormat(
                                item?.discountPrice ? item.discountPrice : item.sellingPrice
                            )
                        }}
                    </div>
                    <div class="text">{{ $t("销量") }} {{ priceFormatInt(item.soldNum) }}</div>
<!--                    <div class="page-views" v-if="itemName != 'SM-wholesaleShop'">-->
<!--                        {{ $t("浏览量") }} {{ priceFormatInt(item.viewsNum) }}-->
<!--                    </div>-->

                </div>
                <!-- 活动折扣 -->
<!--                <div class="discount_box" v-if="item.discountRatio >= 0.01">-->
<!--                    <span>{{ (item.discountRatio * 100).toFixed(0) }}%</span>-->
<!--                    <span>OFF</span>-->
<!--                </div>-->
              <div class="jg_sc">
                <div @click.stop="addCart(item)"><i class="el-icon-shopping-cart-full"></i></div>
                <div @click.stop="addKeepGoods(item)">
                  <i v-if="item.isKeep===1" class="el-icon-star-on"></i>
                  <i v-else class="el-icon-star-off"></i>
                </div>
              </div>
            </div>
        </div>
      <AddCart ref="cartRef" />
    </div>

</template>

<script>
import { Toast } from "vant";
import { isLogin, priceFormat, priceFormatInt } from "@/utils/utis";
import AddCart from "@/page/index/components/addCart.vue";
import {keepGoods, keepGoodsDel} from "@/API/commodity";

export default {
    name: "goodInfo",
  components: {AddCart},
    props: {
        list: {
            type: Array,
            default: () => [],
        },
        index: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            itemName: process.env.VUE_APP_ITEM_NAME,
        }
    },
    methods: {
      addCart(item){
        this.$refs.cartRef.show(item.id)
      },
      //收藏商品
      addKeepGoods(item) {
        if (!isLogin()) {
          this.$notifyWarn(this.$t("请先登录"));
          this.$router.push("/login");
          return;
        }

        if (item.isKeep == 1) {
          let dataJson = {
            sellerGoodsId: item.id,
          };
          keepGoodsDel(dataJson).then(() => {
            Toast(this.$t("取消成功"));
            this.$emit('onLoad');
          });
        } else {
          let dataJson = {
            sellerGoodsId: item.id,
          };
          keepGoods(dataJson).then(() => {
            Toast(this.$t("收藏成功"));
            this.$emit('onLoad');
          });
        }
      },
        priceFormat,
        priceFormatInt,
        openDetails(item) {
            this.$router.push({
                path: "/CommodityDetails",
                query: {
                    sellerGoodsId: item.id
                },
            });
            //   if (isLogin()) {

            //   } else {
            //     this.$router.push('/login')
            //   }
        },
    },
};
</script>

<style scoped lang="scss">
.commodity {
    display: flex;
    flex-wrap: wrap;

    .list-item {
        width: 50%;
        box-sizing: border-box;
        position: relative;
        .list-item-content {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            //border: 1px solid #f2f2f2;
            //border-radius: 4px;
            //background-color: #ffffff;
            //height: 268px;
            margin-bottom: 20px;
            justify-content: flex-start;
            align-items: center;

            .commodity-img {
                // width: 100%;
                // min-height: 0;
                height: 156px;
                // flex: 1;
                padding: 5px;
                display: flex;
                justify-content: center;
                align-items: center;

            }

            img {
                max-width: 100%;
                max-height: 100%;
            }

            .goods-info {
                width: 100%;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
                //padding: 0 12px;
              margin-top: 10px;

                .money {
                  color: #D62113;
                  font-size: 15px;
                  font-weight: 600;
                  padding: 0 6px;
                  box-sizing: border-box;
                  margin-bottom: 6px;
                }

                .text {
                  font-size: 13px;
                  color: #000;
                  margin: 4px 0;
                  padding: 0 6px;
                  box-sizing: border-box;
                }

                .page-views {
                    font-family: "Roboto";
                    font-style: normal;
                    font-weight: 400;
                    font-size: 10px;
                    line-height: 13px;
                    /* identical to box height */
                    color: #999999;
                    margin-top: 2px;
                }

                .title {
                  margin: 6px 0 15px 0;
                  font-size: 16px;
                  font-weight: bold;
                  color: #606060;
                  width: 100%;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -moz-box-orient: vertical;
                  box-orient: vertical;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  padding: 0 6px;
                  box-sizing: border-box;
                }
            }
          .jg_sc{
            margin-top: 5px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            >div{
              margin-right: 10px;
              border: #EDEDED 1px solid;
              width: 30px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              ::v-deep .el-icon-shopping-cart-full{
                font-size: 20px;
                color: #999999;
              }
              ::v-deep .el-icon-star-off{
                font-size: 20px;
                color: #999999;
              }
              ::v-deep .el-icon-star-on{
                font-size: 20px;
                color: #d62014;
              }
            }
          }
        }

        &:nth-child(2n) {
            padding-left: 5px;
        }

        &:nth-child(2n + 1) {
            padding-right: 5px;
        }
    }
}
</style>
